import { observable, action, toJS, computed, autorun } from 'mobx';
import FrameImg from 'components/motionsRender/modules/frameImage/model';
import FrameRectangle from 'components/motionsRender/modules/frameRectangle/model';
import FrameCircle from 'components/motionsRender/modules/frameCircle/model';
import FrameVideo from 'components/motionsRender/modules/frameVideo/model';
import FramePolygon from 'components/motionsRender/modules/framePolygon/model';
import { BaseWithList } from 'stores/models/core';

export default class Frame extends BaseWithList {
  @observable duration = 1000;
  @observable delay = 0;

  constructor(props, data = {}) {
    super();

    this.init({
      props: {
        parent: props.parent,
        type: 'frame',
        label: '帧',
        height: data.height
      },
    });

    // console.log(this, props, data);

    if (data.list) {
      data.list.forEach(item => { // item 可能是外部的一张图片
        let frameElement = null;
        // image 来源于新建动效时页面编辑器的mod.type
        // frameImage 来源于添加帧的时候，帧元素的mod.type
        switch (item.type) {
          case 'image':
          case 'frameImage': {
            frameElement = new FrameImg(this, item);
            break;
          }
          case 'rectangle':
          case 'frameRectangle': {
            frameElement = new FrameRectangle(this, item);
            break;
          }
          case 'circle':
          case 'frameCircle': {
            frameElement = new FrameCircle(this, item);
            break;
          }
          case 'video':
          case 'frameVideo': {
            frameElement = new FrameVideo(this, item);
            break;
          }
          case 'polygon':
          case 'framePolygon': {
            frameElement = new FramePolygon(this, item);
            break;
          }
        }
        if (frameElement) this.insert(frameElement);
      });
    }



  }
}
